<template>
    <div>
        <el-row>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
                <el-card :body-style="{ padding: '0px' }">
                    <img
                        src="https://gitee.com/MarkPolaris/images/blob/master/mysql/mysql_20190613_1631.png"
                        class="image"
                    />
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="8">商品名称</el-col>
                    <el-col :span="4">{{info.name}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="8">价格</el-col>
                    <el-col :span="4">{{info.price}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="8">库存</el-col>
                    <el-col :span="4">{{info.stock}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="8">购买数量</el-col>
                    <el-col :span="4">
                        <el-input-number
                            v-model="num1"
                            @change="handleChange"
                            :min="1"
                            :max="max"
                            label="描述文字"
                        ></el-input-number>
                    </el-col>
                </el-row>
                <el-row>
                   <el-button type="primary" round>买买买</el-button>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            max: 10,
            num1: 1,
            info: {
                name: "华为手机",
                price: 1999,
                stock: 870,
                num: ""
            }
        };
    },
    methods: {
        handleChange(value) {
            console.log(value);
        }
    }
};
</script>
<style scoped>
.image {
    width: 100%;
    height: 500px;
    display: block;
}
.el-row {
    margin-top: 30px;
}
.el-button {
    width: 150px;
}
</style>